<template>
  <el-dialog
    title="项目信息"
    :close-on-click-modal="false"
    :visible.sync="dialogFormVisible"
  >
    <el-tabs v-model="activeName">
      <el-tab-pane label="项目信息" name="first">
        <div class="listItem">
          <div class="list">
            <div class="item">
              <label>名称：</label><span>{{ dataForm.name }}</span>
            </div>
          </div>
          <div class="list">
            <div class="item">
              <label>承运单位：</label><span>{{ dataForm.carrier }}</span>
            </div>
          </div>
          <div class="list">
            <div class="item">
              <label>收货单位：</label><span>{{ dataForm.consignee }}</span>
            </div>
          </div>
          <div class="list">
            <div class="item">
              <label>收货方地址：</label
              ><span>{{ dataForm.consigneeAddress }}</span>
            </div>
          </div>
          <div class="list">
            <div class="item">
              <label>收货方联系人及电话：</label
              ><span>{{ dataForm.consigneePhone }}</span>
            </div>
          </div>
          <div class="list">
            <div class="item">
              <label>托运单位：</label><span>{{ dataForm.shipper }}</span>
            </div>
          </div>
          <div class="list">
            <div class="item">
              <label>托运方联系人：</label
              ><span>{{ dataForm.shipperName }}</span>
            </div>
          </div>
          <div class="list">
            <div class="item">
              <label>托运方联系电话：</label
              ><span>{{ dataForm.shipperPhone }}</span>
            </div>
          </div>
          <div class="list">
            <div class="item"><label>司机信息：</label></div>
            <el-table :data="projectDrivers" style="width: 80%">
              <el-table-column prop="driverName" label="司机姓名">
              </el-table-column>
              <el-table-column prop="driverPhone" label="司机联系电话">
              </el-table-column>
              <el-table-column prop="licenseNumber" label="车牌号">
              </el-table-column>
              <el-table-column prop="licenseNumber" label="下载" width="50">
                <template slot-scope="scope">
                  <i
                    class="el-icon-download"
                    style="font-size: 18px; cursor: pointer"
                    @click="downloadDriver(scope.row.id)"
                  ></i>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="现场评价" name="second">
        <div class="listItem listItemtow" v-if="evaluateState">
          <div class="list">
            <div class="item">
              <div>您对我公司服务人员的服务态度是否满意?</div>
              <div>
                <el-radio-group v-model="form.evaluate1">
                  <el-radio :label="0" :disabled="form.evaluate1 != 1"
                    >满意</el-radio
                  >
                  <el-radio :label="1" :disabled="form.evaluate1 != 2"
                    >不满意</el-radio
                  >
                </el-radio-group>
              </div>
            </div>
          </div>
          <div class="list">
            <div class="item">
              <div>您对我公司服务人员的技术水平是否满意?</div>
              <div>
                <el-radio-group v-model="form.evaluate2">
                  <el-radio :label="0" :disabled="form.evaluate2 != 1"
                    >满意</el-radio
                  >
                  <el-radio :label="1" :disabled="form.evaluate2 != 2"
                    >不满意</el-radio
                  >
                </el-radio-group>
              </div>
            </div>
          </div>
          <div class="list">
            <div class="item">
              <div>您对我公司产品运行情况是否满意?</div>
              <div>
                <el-radio-group v-model="form.evaluate3">
                  <el-radio :label="0" :disabled="form.evaluate3 != 1"
                    >满意</el-radio
                  >
                  <el-radio :label="1" :disabled="form.evaluate3 != 2"
                    >不满意</el-radio
                  >
                </el-radio-group>
              </div>
            </div>
          </div>
          <div class="list">
            <div class="item">
              <div>您对我公司产品质量是否满意?</div>
              <div>
                <el-radio-group v-model="form.evaluate4">
                  <el-radio :label="0" :disabled="form.evaluate4 != 1"
                    >满意</el-radio
                  >
                  <el-radio :label="1" :disabled="form.evaluate4 != 2"
                    >不满意</el-radio
                  >
                </el-radio-group>
              </div>
            </div>
          </div>
          <div class="list">
            <div class="item">
              <div>您认为本公司的服务需要改进的地方:</div>
              <div
                style="
                  border: 1px solid #ccc;
                  min-height: 100px;
                  border-radius: 10px;
                  padding: 5px 28px !important;
                "
              >
                {{ form.suggestion }}
              </div>
            </div>
          </div>
        </div>
        <div v-if="!evaluateState" style="text-align: center; color: #999">
          暂未评价
        </div>
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <span class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false"
          >关 闭</el-button
        >
        <!-- <el-button size="small" type="primary" @click="dataFormSubmit()" :disabled="isDisabled">确 定</el-button> -->
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
import { getToken } from "@/utils/auth";
export default {
  emits: ["refreshDataList"],
  data() {
    return {
      dialogFormVisible: false,
      isDisabled: false,
      dataForm: {
        id: 0,
        name: "", //名称
        carrier: "", //承运单位
        consignee: "", //收货单位
        consigneeAddress: "", //收货方地址
        consigneePhone: "", //收货方联系人及电话
        shipper: "", //托运单位
        shipperPhone: "", //托运方联系电话
      },
      form: {
        evaluate1: "",
        evaluate2: "",
        evaluate3: "",
        evaluate4: "",
        suggestion: "",
      },
      evaluateState: "",
      activeName: "first",
      projectDrivers: [],
      url: process.env.VUE_APP_BASE_API,
      headers: {
        token: getToken(), //从cookie里获取token，并赋值  Authorization ，而不是token
      },
      dataRule: {
        // driverName: [
        //   { required: true, message: '司机姓名必填' },
        // ],
        // driverPhone: [
        //   { required: true, message: '司机联系电话必填' },
        // ],
        // licenseNumber: [
        //   { required: true, message: '车牌号必须填写' },
        // ]
      },
      formLabelWidth: "140px",
    };
  },
  created() {},
  methods: {
    async init(id, evaluateState) {
      this.dataForm.id = id || 0;
      this.evaluateState = evaluateState;
      this.dialogFormVisible = true;
      this.$nextTick(async () => {
        // this.$refs["dataForm"].resetFields();
        this.form.evaluate1 = "";
        this.form.evaluate2 = "";
        this.form.evaluate3 = "";
        this.form.evaluate4 = "";
        this.form.suggestion = "";
        this.fileList = [];
        this.projectList = [];
        this.driverList = [];
        await this.Sevice({
          url: "/project/list",
          method: "get",
        }).then(async (res) => {
          if (res.code != 200) {
          } else {
            this.projectList = res.list;
          }
        });
        if (!this.dataForm.id) {
          // 新增
          // this.treeListTreeSetCurrentNode()
        } else {
          //获取详情
          this.Sevice({
            url: "/project/info/" + this.dataForm.id,
            method: "get",
          }).then(async (res) => {
            // console.log(res);
            if (res.code != 200) {
              // this.$message.error(res.data.msg)
            } else {
              this.dataForm.id = res.info.id;
              this.dataForm.name = res.info.name;
              this.dataForm.carrier = res.info.carrier;
              this.dataForm.consignee = res.info.consignee;
              this.dataForm.consigneeAddress = res.info.consigneeAddress;
              this.dataForm.consigneePhone = res.info.consigneePhone;
              this.dataForm.shipper = res.info.shipper;
              this.dataForm.shipperPhone = res.info.shipperPhone;
              this.projectDrivers = res.info.projectDrivers;
              this.dataForm.shipperName = res.info.shipperName;
            }
          });
        }
        if (this.evaluateState) {
          this.Sevice({
            url: "/project/evaluate/info/" + this.dataForm.id,
            method: "get",
          }).then(async (res) => {
            console.log(res);
            if (res.code != 200) {
              // this.$message.error(res.data.msg)
            } else {
              this.form.evaluate1 = res.info.evaluate1;
              this.form.evaluate2 = res.info.evaluate2;
              this.form.evaluate3 = res.info.evaluate3;
              this.form.evaluate4 = res.info.evaluate4;
              this.form.suggestion = res.info.suggestion;
            }
          });
        }
      });
    },
    downloadDriver(id) {
      this.Sevice({
        url: "/project/print/" + id,
        method: "post",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
        },
        responseType: "blob",
        // withCredentials: false,
      })
        .then((response) => {
          console.log(response);
          let blob = new Blob([response.data], {
            type: "application/x-msdownload",
          });
          const fileName = decodeURI(
            response.headers["content-disposition"].split("=")[1]
          );
          let objectUrl = URL.createObjectURL(blob); // 创建URL
          const link = document.createElement("a");
          link.href = objectUrl;
          // link.download = '.xlsx'// 自定义文件名
          //这里是获取后台传过来的文件名
          link.setAttribute("download", fileName);
          link.click(); // 下载文件
          URL.revokeObjectURL(objectUrl); // 释放内存
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 表单提交
    async dataFormSubmit() {},
  },
};
</script>

<style scoped>
.mod-menu .menu-list__input > .el-input__inner,
.mod-menu .icon-list__input > .el-input__inner {
  cursor: pointer;
}

.mod-menu__icon-popover {
  width: 458px;
  overflow: hidden;
}

.mod-menu__icon-inner {
  width: 478px;
  max-height: 258px;
  overflow-x: hidden;
  overflow-y: auto;
}

.mod-menu__icon-list {
  width: 458px;
  padding: 0;
  margin: -8px 0 0 -8px;
}

.mod-menu__icon-list > .el-button {
  padding: 8px;
  margin: 8px 0 0 8px;
}

.mod-menu__icon-list > .el-button > span {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.mod-menu .icon-list__tips {
  font-size: 18px;
  text-align: center;
  color: #e6a23c;
  cursor: pointer;
}

.el-tree {
  height: 200px;
  overflow-y: auto;
}

.item {
  display: flex;
  padding: 5px 0;
}

.listItemtow .item {
  display: block;
}

.item label {
  margin-right: 10px;
  min-width: 145px;
}

.item span {
  width: calc(100% - 145px);
  /* padding: 5px 0; */
  line-height: 26px;

  /* border-bottom: 1px solid #ccc; */
}

.items div {
  padding-left: 10px;
  line-height: 26px;
}

.list label {
  /* padding: 5px 0; */
  line-height: 26px;
  color: #999;
}

.list {
  /* border-bottom: 1px solid #ccc; */
}

.listItem {
  /* box-shadow: 0px 0px 3px #ccc;
    padding: 10px; */
  font-family: dengxian;
}

.texareastyle {
  text-indent: 28px;
  padding: 5px 28px !important;
  border: 1px solid #ccc;
  min-height: 100px;
  border-radius: 10px;
}
</style>
